<script setup lang="ts">
// 导入组件
import CategoryEntries from './components/CategoryEntries.vue'
import CustomNavbar from './components/CustomNavbar.vue'
import HotPanel from './components/HotPanel.vue'
// 导入其他
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import {
  getHomeBannerAPI,
  getHomeCategoryHeadMutliAPI,
  getHomeHotAPI,
  getHomeNewAPI,
} from '@/services/home'
import PageSkeleton from './components/PageSkeleton.vue'
import XtxGuess from '@/components/XtxGuess.vue'
import type { BannerItem, CategoryItem, HotItem, NewItem } from '@/types/home'
import { useGuessList } from '@/composables'

// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getBannerList = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}
// 获取分类数据
const categoryList = ref<CategoryItem[]>([])
const getCategoryList = async () => {
  const res = await getHomeCategoryHeadMutliAPI()
  categoryList.value = res.result
}
// 获取推荐数据
const hotList = ref<HotItem[]>([])
const getHotList = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}
// 获取新鲜好物数据
const newList = ref<NewItem[]>([])
const getNewList = async () => {
  const res = await getHomeNewAPI()
  newList.value = res.result
}

// 页面加载时
onLoad(() => {
  loadData()
})

const isShowSkeleton = ref(false)
// 首页需要请求的数据
const loadData = async () => {
  isShowSkeleton.value = true
  await Promise.all([getBannerList(), getCategoryList(), getHotList(), getNewList()])
  isShowSkeleton.value = false
}

// 下拉刷新状态
const triggered = ref(false)
// 重置数据
const resetData = () => {
  bannerList.value = []
  categoryList.value = []
  hotList.value = []
  newList.value = []
  // 重置猜你喜欢列表
  guessRef.value?.reset()
}
// 自定义下拉刷新被触发
const onRefresherrefresh = () => {
  isShowSkeleton.value = true
  // 开启下拉刷新状态
  triggered.value = true
  // 重置数据
  resetData()
  setTimeout(async () => {
    // 重新请求数据
    await loadData()
    // 关闭下拉刷新状态
    triggered.value = false
  }, 500)
}

// 猜你喜欢功能复用
const { guessRef, onScrolltolower } = useGuessList()
</script>

<template>
  <!-- 导航条 -->
  <CustomNavbar />

  <scroll-view
    class="scroll-view"
    scroll-y
    refresher-enabled
    enable-back-to-top
    enhanced
    show-scrollbar
    refresher-background="#f7f7f8"
    @scrolltolower="onScrolltolower"
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="triggered"
  >
    <!-- 骨架屏 -->
    <PageSkeleton v-if="isShowSkeleton" />
    <!-- 正常内容 -->
    <template v-else>
      <!-- 通用轮播图 -->
      <XtxSwiper :list="bannerList" />
      <!-- 前台类目 -->
      <CategoryEntries :source="categoryList" />
      <!-- 推荐专区 -->
      <HotPanel :source="hotList" />
      <!-- 新鲜好物 -->
      <!-- <FreshPanel :source="newList" /> -->
      <!-- 热门品牌 :静态结构 -->
      <!-- <BrandsPanel /> -->
      <!-- 专题 :静态结构 -->
      <!-- <TopicPanel /> -->
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}

/* 公共面板 */
// BUG: 写法 :deep 用于解决H5端兼容问题
:deep(.panel) {
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    color: #262626;
    position: relative;
    .title-desc {
      font-size: 24rpx;
      color: #7f7f7f;
      margin-left: 18rpx;
    }
    .more {
      position: absolute;
      right: 24rpx;
      font-size: 26rpx;
      color: #7f7f7f;
    }
  }
  .cards {
    display: flex;
  }
  .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
